<template>
  <div class="loginPage" ref="loginContent">
      <div class="topBox topTitleBox">
          <span class="passwordLogin" :class="{'activeSpan':flag}">
          密&nbsp;码&nbsp;登&nbsp;陆
          </span>
          
          <span class="codeLogin" @click="codeVerificationFun" :class="{'activeSpan':!flag}">
          验&nbsp;证&nbsp;码&nbsp;登&nbsp;陆
          </span>
      </div>
      <div class="inputBox">
        <el-form :model="form" :rules="rules" ref="form">
          <el-form-item label="" prop="phone" class="registerInput" style="margin-bottom:30px;">
                <el-input type="text" class="commonInput" placeholder="手 机 号  PHONE NUMBER" v-model="form.phone" @input="phoneInput"></el-input>
          </el-form-item>
          <el-form-item label="" prop="password" class="registerInput" style="margin-bottom:30px;"
            :rules="[{ required: true, message: '密码不能为空', trigger: ['blur', 'change'] }]">
                <!-- <el-input :type="inputType?'password':'text'"  class="commonInput" placeholder="密 码      PASSWORD" v-model="form.password" @input="psdInput"></el-input>
                <span class="showPwd" @click="showPwd" v-text='inputType?"显示密码":"隐藏密码"' v-show="showFlag"></span> -->
                <el-input type="password" :show-password="showPsd"  class="commonInput pwdInput" placeholder="密 码      PASSWORD" v-model="form.password" @input="psdInput" @keyup.enter.native="handleLogin"></el-input>
          </el-form-item>

        </el-form>
        <div class="pwdChange">
          <router-link to="/changePsd">
            <span>忘记密码?</span>
          </router-link> 
          
          <router-link to="/fallbackPro">
            <span>问题反馈</span>
          </router-link> 
        </div>
        <!-- <el-input :type="inputType?'password':'text'"  class="commonInput" placeholder="密 码      PASSWORD" v-model="form.password" @input="replaceStr"></el-input>
        <span class="showPwd" @click="showPwd" v-text='inputType?"显示密码":"隐藏密码"' v-show="showFlag"></span> -->
        <!-- <input type="checkbox"><span class="remenberPwd">*记住密码</span>   -->
        <!-- <div class="tips" >
          <span class="tipmsg">{{tipmsg}}</span>
          <span class="tipmsg" v-if="showRegister">
            用户不存在,请先<router-link to="/register"><i class='text'>注册</i></router-link>
          </span>
        </div> -->
      </div>

      <div class="bottomBox">
        <common-btn class="loginBtn active-btn" :loginName = 'loginName' @handleLogin='handleLogin' ></common-btn>
        <router-link to="/register"><common-btn class="registeBtn" :loginName = 'registeName'></common-btn></router-link>       
      </div>
    </div>   
</template>

<script>
import { mapMutations } from 'vuex'
import comFun from "../../../commonFunction/common.js"
import CommonBtn from '../../../components/commonBtn.vue'
export default {
    data(){
      return{
        showPsd:true,
        flag:true, // 选中密码登陆/验证码登陆
        showFlag:false, // 显示或隐藏密码切换
        inputType:true, // 显示或隐藏密码
        registeName: '注  册', // 公用组件的参数
        loginName: '登  陆', // 公用组件的参数
        showRegister:false, // 当用户不存在时显示提示信息
        tipmsg:"",
        form:{ // 表单参数
          phone:"",
          password:""
        },
        rules: { // 表单验证规则
          phone: [
            { required: true, message: '账号不能为空', trigger: ['blur', 'change'] } 
          ]
        },
      }
    },
    created(){
      localStorage.removeItem('token');
    },
    mounted(){},
    methods:{
      ...mapMutations(['changeLogin']),
      handleLogin (val) {
          // 表单验证手机号和密码是否为空
          this.$refs['form'].validate((valid) => {
            if(valid){
              this.$api.login(this.form)
              .then(result=> {
                  // 执行某些操作  
                  var resultCode = result.data.code;
                  if(result.data.success){
                    this.userToken = result.data.token;
                    // 将用户token保存到vuex中
                    this.changeLogin({ token: this.userToken });
                    // 登陆成功，跳转到后台列表页面
                    this.$router.push('/backIndex')
                    this.$message({center: true,message: "登陆成功",type: 'success'});
                    // 保存用户信息
                    localStorage.userInfo = JSON.stringify(result.data.data)
                    
                  }else if(resultCode == 2){
                    this.showRegister = true
                  }else{
                    this.$message({center: true,message: result.data.message?result.data.message:"网络错误,请稍后再试",type: 'warning'});
                  }
              }) 
            }
          })
      },
      showPwd(){ // 点击显示或者隐藏密码
        this.inputType = !this.inputType;
      },
      phoneInput(val){
        if(val){
          this.tipmsg = "";
          this.showRegister = false;
        }
      },
      psdInput(val){
        if(val){
          this.showFlag = true;
          this.tipmsg = "";
          this.showRegister = false;
        }else{
          this.showFlag = false;
          this.inputType = true;
        }
      },
      // 验证码登陆
      codeVerificationFun(){
        this.flag = !this.flag
        // 跳转到验证码登录界面
        this.$router.push('/verification')
      }
    },
    components: {
      'common-btn': CommonBtn
    }
}
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1400px) {
  .topBox{
      span{
        &.codeLogin:after{
          width: 133px;         
          left: 166px;
        }
      }
    }
}
.loginPage{
    width: 60%;
    height: 100%;
    margin: 12% auto;
    .topBox{
      span{
        &:nth-child(2){
          margin-left: 30px;
        }
        &.passwordLogin:after{
            width: 103px;
            left: 27px;
        }
        &.codeLogin:after{
          width: 133px;         
          left: 171px;
        }
      }
    }
    .inputBox{
      margin-top:12%;
      input{
        &::-webkit-input-placeholder {
          color: #fff;
        }
        &:nth-child(2){
          margin-top: 30px;
        }
      }
      span{
        font-family: 'Microsoft Yahei';
        font-weight: bold;
        margin-left: 20px;
        cursor: pointer;
        &.remenberPwd{
          display: block;
          font-size: 14px;
          margin-top: 20px;
          color: #77373B;
        } 
        &.showPwd{
          color: #77373B;
          font-size: 18px; 
          text-decoration: underline;
        }
        
      }
      .tips{
        margin-left: 20px;
        margin-top: 15px;
        .tipmsg{
          i{
            font-style:normal;
            color: #77373B;
            cursor: pointer;
            margin-left: 0;
            text-decoration: underline;
          }
        }
      }
      .pwdChange{
        margin-left: 15px;
        font-size: 14px;
        span{
          color: #77373B;
          cursor: pointer;
        }
      }
    }
  }

  
</style>